<template>
  <div class="popup1" style="background: #fbf9fe;">
    <vTitle page="2" @transferUser="back"></vTitle>
    <tab :line-width="1" active-color="#33bb99;">
      <tab-item :selected="classId==2" style="font-weight: 600;font-size:0.9rem;" @on-item-click="change(item)">{{item.classification_name}}</tab-item>
      <tab-item :selected="classId==3&&id==item.id?true:false" v-for="(item,index) in item.children" @on-item-click="change(item)" :key="index">{{item.classification_name}}</tab-item>
    </tab>
    <div v-if="none" style="padding-top:50px;line-height:20px;font-size:0.8rem;text-align:center;color:#999;">该分类下暂无商品</div>
    <div class="goods-list" v-if="!none">
      <ul>
        <li class="search-item" v-for="(item,index) in list" :key="index">
          <div class="item-text">
            <div class="item-img" @click="showDetail(item)">
              <img :src="config1.fileUrl+item.imgList[0].img_url">
            </div>
            <p @click="showDetail(item)">{{item.goods_name}}</p>
            <div class="item-tip">
              <span>销量：{{item.sales_num}}</span>
              <i class="iconfont icon-dianpu" @click="toShop(item)"></i>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div v-transfer-dom>
      <popup v-model="isShowDetail" height="100%">
        <vTitle page="3" @transferUser="back1" v-bind:title="'商品详情'"></vTitle>
        <vDetail v-if="isShowDetail" v-bind:goodsId="goodsId" v-bind:state="isShowDetail"></vDetail>
      </popup>
    </div>
    <div v-transfer-dom>
      <popup v-model="isStore" height="100%" style="background: #fbf9fe">
        <vTitle page="2" @transferUser="back2"></vTitle>
        <vStore v-if="isStore" v-bind:text="text" v-bind:type="type"></vStore>
      </popup>
    </div>
  </div>
</template>

<script>
  import { Tab, TabItem, Group, Popup } from 'vux'
  import vTitle from './Title'
  import vDetail from './Detail'
  import vStore from './Store'
  export default {
    name: "",
    components: {
      vTitle, Tab, TabItem, Group, vDetail, Popup, vStore
    },
    data () {
      return {
        isChose:0,
        list:[],
        none:false,
        isShowDetail:false,
        isStore:false
      }
    },
    props:['item','id','classId'],
    created(){
      this.getGoodsList(this.id)
    },
    methods:{
      // 查看商品详情
      showDetail(item){
        this.isShowDetail = true
        this.goodsId = item.id
      },
      toShop(text){
        this.text = text
        this.type = 0
        this.isStore = true
      },
      back2(msg){
        this.isStore = msg
      },
      // 根据商品分类id查询商品列表
      getGoodsList(id){
        this.$vux.loading.show();
        let obj = {
          start:1,
          goodsClassificationId:id,
          supplyId:'',
          goodsName:'',
        }
        this.config1.post('/purchasers/app/goods/findGoods', obj).then(res=>{
          this.$vux.loading.hide();
          if(res.data.code==='0'){
            if(res.data.page.list.length==0){
              this.none = true
              return;
            }
            this.list = res.data.page.list
            this.none = false
          }else{
            this.msg(this.config1.handleError(res.data));
          }
        })
      },
      change(item){
        this.getGoodsList(item.id)
      },
      // 信息提示
      msg(str){
        this.$vux.toast.show({
          type: 'text',
          text: str,
          position: 'default',
          time: 800,
        });
      },
      back(msg){
        this.$emit('transferUser',false)
      },
      back1(msg){
        this.isShowDetail = false
      },
    }
  }
</script>

<style scoped lang="less">
  @import "../../../assets/css/font_975465_4qn59qnejbp/iconfont.css";
  *{
    font-size: 0.8rem;
  }
  .goods-list{
    width: 95%;
    margin: 0 auto;
  .search-item{
    width: 33%;
    float: left;
    margin-top:10px;
  .item-text{
    width: 95%;
    background: #fff;
    margin:0 auto;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 0 8px #eae9ec;
    line-height: 2rem;
  .item-img{
    height:110px;
  img{
    height:100%;
    width:100%;
  }
  }
  p{
    font-size: 0.8rem;
    display: block;
    white-space: nowrap;
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
    text-overflow:ellipsis;
  }
  .item-tip{
    padding:0 0.5rem;
    .iconfont{
      color:#33bb99;
      float: right;
    }
    span{
      color: #999;
      font-size: 0.6rem;
    }
  }
  .item-address{
    font-size: 0.6rem;
    display: block;
    line-height:1.5rem;
    white-space: nowrap;
    /*width: 90%;*/
    /*margin: 0 auto;*/
    overflow: hidden;
    text-overflow:ellipsis;
  .iconfont{
    color:#33bb99;
    padding:0 0.2rem 0 0.3rem;
  }
  }
  }
  }
  }
</style>
